<template>
	<view class="pt-20">
		<view class="invite-head flex plr-55">
			<view @click="changeHeadIndex(index)" class="invite-head-li" :class="{active:index == headIndex}"
				v-for="(item,index) in headList" :key="index">{{ item }}</view>
		</view>
		<view class="plr-25 flex1 flex-column flex-center flex-middle pt-30" v-if="headIndex == 0">
			<view class="title">幻Dao 扬帆起航 拉新活动正式来袭</view>
			<view class="mt-15 mb-40 white size-30" style="color: #3c3c3c;">【截止时间为{{ ranking.time }}】</view>
			<!-- <view class="con">
				
			</view> -->
			<scroll-view scroll-y="true" class="con">
				<view class="pb-30 pt-10" style="box-sizing: border-box;">
					<image :src="status.image" mode="widthFix" style="width: 100%;"></image>
					<!-- <view class="white size-32 ptb-30">活动说明</view>
					<view class="size-24" style="color: #BDBDBE;">幻Dao 开启创世拉新活动，邀请好友加入幻Dao宇宙航行探险，就可以获得丰厚的英雄奖励。</view>
					<view class="flex1 flex-middle ptb-40">
						<image src="/static/mine/icon.png" mode="" class="w-80 h-32"></image>
						<view class="color-ff size-28 mlr-20">活动一</view>
						<image src="/static/mine/icon.png" mode="" class="w-80 h-32"></image>
					</view>
					<view class="size-26 color-e6" style="line-height: 36rpx;">老用户邀请5位新用户，即可获得一个空投，指定藏品空投(购买盲盒为是有效用户)</view>
					<view class="flex1 flex-middle ptb-40">
						<image src="/static/mine/icon.png" mode="" class="w-80 h-32"></image>
						<view class="color-ff size-28 mlr-20">活动二</view>
						<image src="/static/mine/icon.png" mode="" class="w-80 h-32"></image>
					</view>
					<view class="size-26 color-e6" style="line-height: 36rpx;">新用户注册即可参与购买4.99元《战国七雄》系列盲盒一份</view>
					<view class="flex1 flex-middle ptb-40">
						<image src="/static/mine/icon.png" mode="" class="w-80 h-32"></image>
						<view class="color-ff size-28 mlr-20">拉新排行榜活动</view>
						<image src="/static/mine/icon.png" mode="" class="w-80 h-32"></image>
					</view>
					<view class="size-26 color-e6" style="line-height: 36rpx;">
						第1名:奖励创世一份+苹果13pro 256G一个+现金红包1888元</br>
						第2名:创世一份+平板电脑一个+现金红包999元</br>
						第3名:创世一份+华为运动手表+红包666元</br>
						第4-10名：首发藏品优先购一份+现金红包88元+平台系列藏品一份</br>
						第11-50名：首发藏品优先购一份+平台系列藏品一份</br>
						第51-100名：首发藏品优先购一份（拉新效益不叠加）</br>
					</view> -->
				</view>
			</scroll-view>
		</view>
		<view class="plr-30 pt-30" v-if="headIndex == 1">
			<view class="head pl-40 ptb-40 flex flex-column flex-top relative">
				<view class="white size-36">我的邀请</view>
				<view class="size-24" style="color:#ECECEC">该邀请可继承后续支持的产品返佣</view>
				<view class="inviteNumber flex1 flex-middle pl-20">
					<view class="size-22" style="color: #CBCBCB;">已邀请{{ award.user_count }}人</view>
					<image src="/static/login-more.png" class="w-26 h-26 ml-10" mode=""></image>
				</view>
			</view>
			<view class="pt-55 white size-36 bold">奖励</view>
			<view class="">
				<view class="flex1 flex-middle mt-60">
					<image src="/static/mine/4.png" class="w-60 h-60 mr-50" mode=""></image>
					<view class="flex flex-1">
						<view class="size-28 white">纪念藏品</view>
						<view class="size-26" style="color: #A1A1A6;">{{ award.jinian_status == 0 ? '未' : '已' }}获得</view>
					</view>
				</view>
				<!-- <view class="flex1 flex-middle mt-60">
					<image src="/static/mine/5.png" class="w-60 h-60 mr-50" mode=""></image>
					<view class="flex flex-1">
						<view class="size-28 white">创世空投</view>
						<view class="size-26" style="color: #A1A1A6;">未获得</view>
					</view>
				</view> -->
				<view class="flex1 flex-middle mt-60">
					<image src="/static/mine/6.png" class="w-60 h-60 mr-50" mode=""></image>
					<view class="flex flex-1">
						<view class="size-28 white">优先购</view>
						<view class="size-26" style="color: #A1A1A6;">剩余{{ award.number }}份</view>
					</view>
				</view>
				<!-- <view class="flex1 flex-middle mt-60">
					<image src="/static/mine/7.png" class="w-60 h-60 mr-50" mode=""></image>
					<view class="flex flex-1">
						<view class="size-28 white">指定优先购</view>
						<view class="size-26" style="color: #A1A1A6;">剩余0份</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="" v-if="headIndex == 2">
			<view class="pt-60 pb-120">
				<view class="size-24 text-center" style="color: #ADAEB0;">奖励将按截止时间排名进行发放，排行截止时间</view>
				<view class="white size-30 bold mt-30 text-center">{{ ranking.time }}</view>
			</view>
			<view class="plr-35 flex">
				<view :class="{'w-180':ranking.list && ranking.list.length < 2}">
					<view class=" flex flex-column" style="margin-bottom: -150rpx;" v-if="ranking.list && ranking.list.length > 1">
						<view class="relative w-120 h-120 radius" style="border: 2rpx solid #E5E6EA;">
							<image :src="ranking.list[1].head_image" mode="aspectFill" class="w-116 h-116 radius"></image>
							<image src="/static/mine/9.png" style="top: -30rpx;left: -10rpx;" class="w-62 h-62 absolute"
								mode=""></image>
						</view>
						<view class="mt-20 mb-10 white size-30 w-180 text-center ell1">{{ ranking.list[1].nick_name }}</view>
						<view class="white size-22 mb-10 btn text-hide">
							{{ranking.list[1].shuoming}}
							<!-- 获999+大礼包 -->
						</view>
						<view class="white size-24">邀请{{ ranking.list[1].count }}名好友</view>
					</view>
				</view>
				
				<view class=" flex flex-column" v-if="ranking.list && ranking.list.length">
					<view class="relative w-160 h-160 radius" style="border: 2rpx solid #FFD13D;">
						<image :src="ranking.list[0].head_image" mode="aspectFill" class="w-156 h-156 radius"></image>
						<image src="/static/mine/8.png" style="top: -38rpx;left: -10rpx;" class="w-76 h-76 absolute"
							mode=""></image>
					</view>
					<view class="mt-20 mb-10 white size-30 w-200 ell1 text-center">{{ ranking.list[0].nick_name }}</view>
					<view class="white size-22 mb-10 btn text-hide" style="width: 200rpx;">
						{{ranking.list[0].shuoming}}
						<!-- 获1888+大礼包 -->
					</view>
					<view class="white size-24">邀请{{ ranking.list[0].count }}名好友</view>
				</view>
				<view :class="{'w-180':ranking.list}">
					<view class=" flex flex-column" style="margin-bottom: -240rpx;" v-if="ranking.list && ranking.list.length > 2">
						<view class="relative w-120 h-120 radius" style="border: 2rpx solid #E4A65A;">
							<image :src="ranking.list[2].head_image" mode="aspectFill" class="w-116 h-116 radius"></image>
							<image src="/static/mine/10.png" style="top: -30rpx;left: -10rpx;" class="w-62 h-62 absolute"
								mode=""></image>
						</view>
						<view class="mt-20 mb-10 white size-30 w-180 ell1 text-center">{{ ranking.list[2].nick_name }}</view>
						<view class="white size-22 mb-10 btn text-hide">
							{{ranking.list[2].shuoming}}
							<!-- 获666+大礼包 -->
						</view>
						<view class="white size-24">邀请{{ ranking.list[2].count }}名好友</view>
					</view>
				</view>
				
			</view>
			<view class="mt-20">
				<image src="/static/mine/12.png" class="w-750 h-387" mode=""></image>
			</view>
			<view class="pl-70 pr-45" style="margin-top: -60rpx;">
				<view class="flex" :class="{'mb-50':index != list.length - 1}" v-for="(item,index) in list" :key="index">
					<view class="flex1 flex-middle">
						<view class="white size-30">{{ index +  4}}</view>
						<image :src="item.head_image" mode="aspectFill" class="w-60 h-60 radius mr-30 ml-30">
						</image>
						<view class="white size-30 bold">{{ item.nick_name }}</view>
					</view>
					<view class="" style="width: 200rpx">
						<view class="white mb-18 size-24 text-center">邀请{{ item.count }}名好友</view>
						<view class="size-22 text-hide" style="color: #FBCE2F; text-align: center">
							{{item.shuoming}}
						<!-- 获得优先购1份+现金88 -->
						</view>
					</view>
				</view>
			</view>
		</view>:
		<view class="plr-25 relative pb-30" v-if="headIndex != 1"
			:style="{'margin-top': headIndex == 0 ? '-60rpx' : 0}">
			<view class="radius-20 plr-60 flex h-160" style="background: #fff;color: #3c3c3c;">
				<view class="white">
					<view class="size-28 text-center">{{ ranking.user_count }}人</view>
					<view class="size-24">我的邀请</view>
				</view>
				<view class="white">
					<view class="size-28 text-center">{{ ranking.paiming }}位</view>
					<view class="size-24">当前排名</view>
				</view>
				<view class="proceed" :style="{background: status.status == 1 ? 'linear-gradient(90deg, #EEA634, #DE2D32)' : '#999999'}">{{ status.status == 1 ? '进行中' : '已结束' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headList: ['邀请活动', '我的奖励', '邀请排行'], //
				headIndex: 0, //
				award:{},//我的奖励
				ranking:{},//排名
				list:[],//
				status:{},
				
			};
		},
		methods:{
			changeHeadIndex (index) {
				this.headIndex = index
				if (index == 1) {
					this.getMyYaoQing()
				} else if (index == 2) {
					this.getMyYaoQingList()
				}
			},
			getMyYaoQingList () {
				this.$http('api/newapi/myYaoQingList').then(res=>{
					this.list = res.list.slice(3,res.list.length)
					this.ranking = res
				}).catch(err=>{
					console.log(err);
					uni.removeStorageSync('token')
					uni.reLaunch({
					  url: '/pages/login/index',
					})
				})
			},
			getMyYaoQing () {
				this.$http('api/newapi/myYaoQing').then(res=>{
					this.award = res
				})
			},
			getyaoImage () {
				this.$http('api/newapi/yaoImage').then(res=>{
					this.status = res
				})
			}
		},
		onLoad() {
			this.getyaoImage()
			this.getMyYaoQingList()
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss">
	.invite-head-li {
		line-height: 80rpx;
		color: #3c3c3c;
		font-size: 30rpx;
	}
	.white {
  color: #3c3c3c;
}

	.invite-head {
		.active {
			color: #e66633;
			position: relative;

			&::after {
				width: 80rpx;
				height: 3rpx;
				content: '';
				bottom: 0;
				left: 50%;
				position: absolute;
				transform: translateX(-50%);
				background: #e66633;
				border-radius: 2rpx;
			}
		}
	}

	.title {
		width: 590rpx;
		height: 120rpx;
		color: #fff;
		font-size: 28rpx;
		padding: 40rpx 0 0 40rpx;
		background: url('@/static/mine/14.png') no-repeat;
		background-size: cover;
	}

	.con {
		// width: 100%;
		// height: 1005rpx;
		// background: url(@/static/mine/2.png) no-repeat;
		// background-size: cover;
	}

	.proceed {
		width: 130rpx;
		height: 54rpx;
		color: #FFFFFF;
		line-height: 54rpx;
		text-align: center;
		font-size: 26rpx;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 27rpx;
	}

	.head {
		width: 690rpx;
		height: 224rpx;
		background: url('@/static/mine/3.png') no-repeat;
		background-size: cover;
	}

	.inviteNumber {
		top: 40rpx;
		right: 0;
		// width: 160rpx;
		height: 44rpx;
		position: absolute;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 22rpx 0rpx 0rpx 22rpx;
	}

	.btn {
		width: 180rpx;
		height: 44rpx;
		text-align: center;
		line-height: 44rpx;
		background: linear-gradient(0deg, #DE5032 0%, #E99733 100%);
		border-radius: 22rpx;
	}

	image {
		display: block;
	}
	
	
	.text-hide {
	  overflow:hidden; //超出的文本隐藏
	  text-overflow:ellipsis; //用省略号显示
	  white-space:nowrap; //不换行
    padding: 0 10rpx;
	}
</style>
